<template>
  <div class="content">
    <heads :current="5"></heads>
    <div class="banner">
      <a href="#">
        <img :src="gallery" />
        <div class="font">
          <p>{{ $t('gallery.title') }}</p>
        </div>
      </a>
    </div>
    <div class="gallery-container" ref="galleryContainer">
      <el-form>
        <el-form-item>
          <el-select style="width: 300px" v-model="location" @change="fetchImages(false)">
            <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div class="gallery-grid">
        <div v-for="(image, index) in images" :key="index" class="gallery-item">
          <el-image
            :src="image.url"
            fit="cover"
            :preview-src-list="allImageUrls"
            class="gallery-image"
          >
            <div
              slot="placeholder"
              class="image-placeholder">
              <i class="el-icon-loading"></i>
            </div>
          </el-image>
        </div>
      </div>

      <el-empty v-if="images.length === 0" description="Empty" style="margin: 0 auto"></el-empty>

      <!-- Desktop Pagination -->
      <div class="pagination-container" v-if="!isMobile">
        <el-pagination
          :current-page.sync="currentPage"
          :page-size="pageSize"
          :total="total"
          layout="prev, pager, next"
          @current-change="handlePageChange"
        />
      </div>

      <!-- Mobile Loading -->
      <div v-if="isMobile && hasMore" class="load-more-container">
        <el-button :loading="loading" @click="loadMore" type="text" plain>加载更多 ></el-button>
      </div>
    </div>
    <foot></foot>
  </div>
</template>

<script>
import {http} from "@/api/api";

export default {
  name: 'Gallery',
  data() {
    return {
      location: 'all',
      currentPage: 1,
      pageSize: 20,
      images: [],
      total: 0,
      isMobile: false,
      loading: false,
      hasMore: true,
    }
  },
  computed: {
    banner() {
      return this.$store.state.banners || {}
    },
    gallery() {
      return ((this.banner['gallery'] || { url: '' }).url).split(',')[0]
    },
    allImageUrls() {
      return this.images.map(img => img.url)
    },
    options() {
      return [
        {
          value: 'all',
          label: this.$t('gallery.all')
        },
        {
          value: '船相关照片',
          label: this.$t('gallery.ship')
        },
        {
          value: '钓鱼场景或鱼获照片',
          label: this.$t('gallery.ship2')
        },
        {
          value: '潜水照片',
          label: this.$t('gallery.ship3')
        },
        {
          value: '自然风光野生动物',
          label: this.$t('gallery.ship4')
        },
        {
          value: '珍贵记忆',
          label: this.$t('gallery.ship5')
        },
        {
          value: '',
          label: this.$t('gallery.ship6')
        }
      ]
    }
  },
  methods: {
    checkDevice() {
      this.isMobile = window.innerWidth <= 768
      // Reset page when switching device type
      this.currentPage = 1
      this.fetchImages()
    },
    async handlePageChange(page) {
      this.currentPage = page
      await this.fetchImages()
    },
    async fetchImages(append = false) {
      if (this.loading) return

      try {
        this.loading = true
        const data = await http.gallery.page({
          pageNum: this.currentPage,
          pageSize: this.pageSize,
          location: this.location
        })
        if (append) {
          this.images = [...this.images, ...(data.data.rows || [])]
        } else {
          this.images = data.data.rows || []
        }
        this.total = data.data.count
        this.hasMore = this.images.length < this.total
      } catch (error) {
        console.error('Error fetching gallery images:', error)
        this.$message.error('Failed to load gallery images')
      } finally {
        this.loading = false
      }
    },
    async loadMore() {
      if (this.loading || !this.hasMore) return
      this.currentPage += 1
      await this.fetchImages(true)
    }
  },
  created() {
    this.checkDevice()
    this.fetchImages()
  },
  mounted() {
    window.addEventListener('resize', this.checkDevice)
  },
  beforeDestroy() {
    window.removeEventListener('resize', this.checkDevice)
  }
}
</script>

<style scoped>
.gallery-container {
  max-width: 1200px;
  margin: 1rem auto;
  padding: 0 1rem;
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 1rem;
}

.gallery-item {
  aspect-ratio: 1;
  overflow: hidden;
  transition: transform 0.3s ease;
}

.gallery-item:hover {
  transform: scale(1.02);
}

.gallery-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f5f7fa;
}

.pagination-container {
  display: flex;
  justify-content: center;
  margin: 2rem 0;
}

.load-more-container {
  display: flex;
  align-items: center;
  justify-content: center;
}

@media screen and (max-width: 768px) {
  .gallery-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }
  .gallery-container {
    padding: 0 0.5rem;
  }
  .gallery-item {
    aspect-ratio: 4/3;
  }
}

@media screen and (max-width: 480px) {
  .gallery-grid {
    grid-template-columns: repeat(1, 1fr);
    gap: 8px;
  }
  .gallery-container {
    padding: 0 0.25rem;
  }
  .gallery-item {
    aspect-ratio: 16/9;
  }
}
</style>
